<template>
	<div class="my">
		<myheader :type_title="type_title" :title="title"></myheader>
		<div class="info">
			<div class="info-header">
				<div>
					<div class="photo">
						<div>
							<img @click="openfile" :src="userInfo.avatar" id="previewimg"/>
							<input type="file" hidden="hidden" ref="foodimg" id="foodimg" name="foodimg" @change="preview"/>
						</div>
					</div>
					<div class="phone"><p>12345678999</p></div>
					<div class="btns" @click="btnDrop" ><button>退出</button></div>					
				</div>
				<div class="nav">
					<ul>
						<li><router-link to="/nominate"><p id="nominateNum">0</p><span>我的推荐</span></router-link></li>
						<li><router-link to="/coupon"><p id="couponNum">0</p><span>优惠券</span></router-link></li>
						<li><router-link to="/collect"><p id="collectNum">0</p><span>我的收藏</span></router-link></li>
						<li><router-link to="/subscribe"><p id="subscribeNum">0</p><span>我的订阅</span></router-link></li>
						<li><router-link to="/lookhouselist"><p id="lookhouselistNum">0</p><span>看房清单</span></router-link></li>
					</ul>
				</div>
			</div>
			<div class="info-serve">
				<div class="serve-title">— 服务大厅 —</div>
				<div class="serve-nav">
					<ul>
						<li><span></span><p>选择服务</p></li>
						<li><span></span><p>电脑设备</p></li>
						<li><span></span><p>公司成立</p></li>
						<li><span></span><p>虚拟地址</p></li>
						<li><span></span><p>绿植服务</p></li>
						<li><span></span><p>打印复印</p></li>
						<li><span></span><p>保洁服务</p></li>
						<li><span></span><p>搬家服务</p></li>
						<li><span></span><p>整装</p></li>
						<li><span></span><p>商标服务</p></li>
						<li><span></span><p>代理记帐</p></li>
						<li><span></span><p>极速快装</p></li>
						<li><span></span><p>薪酬福利</p></li>
						<li><span></span><p>办公桌</p></li>
						<li><span></span><p>软装</p></li>
						<li><span></span><p>组合家具</p></li>
						<li><span></span><p>空气净化</p></li>
						<li><span></span><p>办公椅</p></li>
						<li><span></span><p>综合布线</p></li>
						<li><span></span><p>行政许可</p></li>
						<li><span></span><p>商务会展</p></li>
						<li><span></span><p>咨询</p></li>
						<li><span></span><p>版权服务</p></li>
					</ul>
				</div>
			</div>
			<div class="info-serve">
				<div class="serve-title">— 我的服务 —</div>
				<div class="serve-text">
					<div class="text-header text-header-color1">
						<span>写字楼出租</span>
						<button type="button">进入详情</button>
					</div>
					<div class="text-nav">
						<ul>
							<li>
								<router-link to="">
									<span>0</span>
									<p>我的房源投放</p>
								</router-link>
							</li>
							<li>
								<router-link to="/subscribe">
									<span id="subscribeNums">0</span>
									<p>我的订阅</p>
								</router-link>
							</li>
							<li>
								<router-link to="/collect">
									<span id="collectNums">0</span>
									<p>我的收藏</p>
								</router-link>
							</li>
						</ul>
					</div>
					<div class="lookhouse">
						<div class="lh-title">我的看房清单</div>
						<div class="lh-nav">暂无看房清单</div>
						<router-link to="">立即找房</router-link>
					</div>
				</div>				
				<div class="serve-text">
					<div class="text-header text-header-color2">
						<span>写字楼出售</span>
						<button type="button">进入详情</button>
					</div>
					<div class="text-nav">
						<ul>
							<li>
								<router-link to="">
									<span>0</span>
									<p>我的房源投放</p>
								</router-link>
							</li>
							<li>
								<router-link to="/subscribe">
									<span id="subscribeNumss"></span>
									<p>我的订阅</p>
								</router-link>
							</li>
						</ul>
					</div>
					<div class="lookhouse">
						<div class="lh-title">我的看房清单</div>
						<div class="lh-nav">暂无看房清单</div>
						<router-link to="">立即找房</router-link>
					</div>
				</div>				
				<div class="serve-text">
					<div class="text-header text-header-color3">
						<span>我的商城服务</span>
					</div>
					<div class="text-info">
						<div class="text-info-nav"></div>
						<div class="text-info-set">您还没有商城服务类的信息</div>
						<div class="text-info-btn">
							<router-link to="">立即预约</router-link>
						</div>
					</div>
				</div>
			</div>
			<div class="info-serve">
				<div class="serve-title">— 关于蜗居 —</div>
				<div class="serve-test">
					<h2>好租网-领先的O2O互联网办公服务平台</h2>
					<p>致力于为中国企业提供从写字楼租赁到覆盖各类强相关服务领域的整体解决方案，打造O2O企业服务平台的生态闭环。</p>
				</div>
			</div>
			<div class="test-nav">
				<ul>
					<li>
						<span></span>
						<div>
							<span>50万+ 套</span>
							<p>海量精品房源</p>
						</div>
					</li>
					<li>
						<span></span>
						<div>
							<span>200+ 种</span>
							<p>优质企业服务</p>
						</div>
					</li>
					<li>
						<span></span>
						<div>
							<span>1000+ 人</span>
							<p>专业顾问团队</p>
						</div>
					</li>
					<li>
						<span></span>
						<div>
							<span>1小时</span>
							<p>闪速成交时间</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/user/myheader'
	export default {
		name: "my",
		data() {
			return {
				title:"个人信息",
				type_title:"index",
				userInfo:{
					avatar:""
				}
			}
		},
		components:{
			myheader
		},
		mounted(){
			var userId = localStorage.getItem("userId");
			var _this = this;
			//显示用户基本信息
			_this.axios.get(_this.ajaxUrls+'/api/User/selectUser?id='+userId).then(function(res){
				//显示头像
				var img = document.getElementById("previewimg");
				if(res.data[0].user_src == null){
					img.src = '../../../static/image/header.png';
				}else{
					img.src = res.data[0].user_src;
					$(".phone p").html(res.data[0].user_name);
				}
			}).catch(function(err){
				console.log(err);
			});	
			
			//查询用户收藏的总数
			_this.axios.get(_this.ajaxUrls+'/api/User/takecount?id='+userId).then(function(res){
				$("#collectNum").html(res.data);
				$("#collectNums").html(res.data);
			}).catch(function(err){
				console.log(err)
			})
			
			//查询用户订阅条件的总数
			_this.axios.get(_this.ajaxUrls+'/api/User/collectcount?id='+userId).then(function(res){
				$("#subscribeNum").html(res.data);				
				$("#subscribeNums").html(res.data);
				$("#subscribeNumss").html(res.data);
			}).catch(function(err){
				console.log(err)
			})
		},
		methods:{
			//退出登录
			btnDrop(){
				localStorage.removeItem('userId');
				this.$router.push("/user");
			},
			//换头像
			openfile(){
				$('input[type=file]').click();
			},
			btnImg(){				
				//得到图片
				let x = this.$refs.foodimg.files[0];
				//创建一个form对象
				let params = new FormData();
				//append 向form表单添加数据
				params.append('file',x);
				//添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
          		let config = {
            		headers:{'Content-Type':'multipart/form-data'}
          		};
          		//post请求保存
          		var _this = this;
				_this.axios.post(_this.ajaxUrls+'/api/User/urlImg',params,config).then(function(res){
					//得到图片地址	
          			var userId = localStorage.getItem('userId');
					var src = res.config.url;				
		      		var data = {
		      			userId:userId,
		      			src:src
		      		}
		      		console.log(userId);
					_this.axios.post(_this.ajaxUrls+'/api/User/updateImg',_this.qs.stringify(data)).then(function(res){
						console.log(res);						
					}).catch(function(err){
						console.log(err);
					})
				}).catch(function(err){
					console.log(err);
				})
			},
			preview(e){
				let $target = e.target || e.srcElement
			    let file = $target.files[0]
			    var reader = new FileReader()
			    reader.onload = (data) => {
			    	let res = data.target || data.srcElement
			    	this.userInfo.avatar = res.result
			    }
			    reader.readAsDataURL(file);
			    this.btnImg();
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.my{
		width: 100%;
		height: auto;	
	}
	.info{
		width: 100%;
		height: auto;
	}
	.info-header{
		width: 7.5rem;
		height: 4.2rem;
		background: radial-gradient(circle at 1rem,#ce78d3,#8d56a7);
		display: flex;
		flex-wrap: wrap;
	}
	.info-header>div:first-of-type{
		width: 100%;
		height: 3.2rem;		
		display: flex;
		flex-wrap: wrap;
	}
	.photo{
		width: 100%;
		height: 1.4rem;
		margin-top: 0.3rem;
	}
	.photo div{
		width: 1.4rem;
		height: 1.4rem;
		border-radius: 50%;	
		margin: auto;
	}
	.photo #previewimg{
		display: inline-block;
		width: 1.4rem;
		height: 1.4rem;
		border: none;
		border-radius: 50%;	
		margin: auto;
		outline: none;
		overflow: hidden;
	}
	.phone{
		width: 100%;
		height: 0.45rem;
	}
	.phone p{
		width: 3rem;
		height: 0.45rem;
		background: rgba(225,225,225,0.6);
		border-radius: 30px;
		text-align: center;
		line-height: 0.45rem;
		color: white;
		font-size: 0.35rem;
		margin: auto;	
	}
	.btns{
		width: 1.1rem;
		height: 0.45rem;
		margin: auto;
	}
	.btns>button{
		width: 1.1rem;
		height: 0.45rem;
		border: 2px solid rgba(225,225,225,0.6);
		border-radius: 5px;		
		text-align: center;
		line-height: 0.4rem;
		color: white;
		font-size: 0.3rem;
		outline: none;
		box-sizing: border-box;
	}
	.nav{
		width: 100%;
		height: 1rem;
		background: rgba(0,0,0,0.2);
	}
	.nav ul{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.nav li{
		width: 1.5rem;
		height: 100%;
		text-align: center;
		color: white;
		font-size: 0.3rem;
	}
	.nav a {
	    text-decoration: none;
	    color: white;
	}
	.nav p{
		width: 100%;
		height: 50%;
		line-height:0.5rem;
	}
	.nav span{
		width: 100%;
		height: 50%;
		display: block;
		line-height:0.5rem;
		color: #FFFFFF;
	}
	.info-serve{
		width: 100%;
		height: auto;
		border-bottom: 3px solid #F1F1F1;
		border-top: 3px solid #F1F1F1;
	}
	.serve-title{
		width: 100%;
		height: 0.7rem;
		text-align: center;
		line-height: 0.7rem;
		color: #686383;
		font-size: 0.4rem;
	}
	.serve-nav{
		width: auto;
		height: 2rem;
	}
	.serve-nav ul{
		width: auto;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		padding: 0 0.2rem;		
	}
	.serve-nav ul li{
		width: 2rem;
		height: 100%;
		display: inline-block;
		position: relative;
	}
	.serve-nav ul li p{
		color: #919096;
		font-size: 0.3rem;
		text-align: center;
		margin-top: 80%;
	}
	.serve-nav li span{
		display: inline-block;
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: ;
		width: 60px;
		height: 60px;
		background: url(../../../static/image/icon_user.png) no-repeat;
	}
	.serve-nav li:first-of-type span{
		background-position: -345px -114px;
	}
	.serve-nav li:nth-of-type(2) span{
		background-position: -416px -42px;
	}
	.serve-nav li:nth-of-type(3) span{
		background-position: -414px -114px;
	}
	.serve-nav li:nth-of-type(4) span{
		background-position: -546px -42px;
	}
	.serve-nav li:nth-of-type(5) span{
		background-position: -280px -42px;
	}
	.serve-nav li:nth-of-type(6) span{
		background-position: -210px -114px;
	}
	.serve-nav li:nth-of-type(7) span{
		background-position: -345px -42px;
	}
	.serve-nav li:nth-of-type(8) span{
		background-position: -210px -42px;
	}
	.serve-nav li:nth-of-type(9) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(10) span{
		background-position: -4px -114px;
	}
	.serve-nav li:nth-of-type(11) span{
		background-position: -547px -114px;
	}
	.serve-nav li:nth-of-type(12) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(13) span{
		background-position: -142px -114px;
	}
	.serve-nav li:nth-of-type(14) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(15) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(16) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(17) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(18) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(19) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(20) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(21) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(22) span{
		background-position: -74px -42px;
	}
	.serve-nav li:nth-of-type(23) span{
		background-position: -483px -114px;
	}
	.serve-text{
		width: 100%;
		height: auto;
		padding: 0 0.3rem;
		box-sizing: border-box;
		margin-top: 0.5rem;
	}
	.text-header{
		width: 100%;
		height: 0.65rem;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.text-header-color1{		
		width: 100%;
		height: 0.65rem;
		border-left: 0.05rem solid #2aaef6;
	}
	.text-header-color2{		
		width: 100%;
		height: 0.65rem;
		border-left: 0.05rem solid #cc77df;
	}
	.text-header-color3{
		width: 100%;
		height: 0.65rem;
		border-left: 0.05rem solid #68d845;
	}
	.text-header span{
		display: inline-block;
		width: 2.5rem;
		height: 100%;
		color: #333;
		font-size: 0.35rem;
		line-height: 0.65rem;
		padding: 0 0.1rem;		
	}
	.text-header button{
		width: 1.8rem;
		height: 0.5rem;
		color: white;
		font-size: 0.35rem;
		background: #fe9a00;
		border: none;
		border-radius: 15px;
	}
	.text-nav{
		width: 100%;
		height: 2rem;
	}
	.text-nav ul{
		width: 100%;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 2px solid #f1f1f1;
		box-sizing: border-box;
	}
	.text-nav li{
		width: 33.33%;
		height: 100%;
	}
	.text-nav a{
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.text-nav span{
		display: inline-block;
		width: 100%;
		font-size: 0.4rem;
		color: #666666;
		line-height: 1rem;
	}
	.text-nav p{
		width: 100%;
		font-size: 0.35rem;
		color: #999;
	}
	.lookhouse{
		width: 100%;
		height: auto;
	}
	.lh-title{
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		color: #999999;
		font-size: 0.35rem;
	}
	.lh-nav{
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		color: #999999;
		font-size: 0.3rem;
	}
	.lookhouse a{
		display: inline-block;
		width: 100%;
		height: 0.7rem;
		border-radius: 0.1rem;
		background: #fe9a00;
		font-size: 0.3rem;
		color: white;
		text-align: center;
		line-height: 0.7rem;
		margin-top: 0.2rem;
		margin-bottom: 0.5rem;
	}
	.text-info{
		width: 100%;
		height: 5.5rem;
	}
	.text-info-nav{
		width: 100%;
		height: 3rem;
		background: url(../../../static/image/no_data.png) no-repeat center;
		background-size: 1.4rem 1.2rem;
	}
	.text-info-set{
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		font-size: 0.35rem;
		color: #999999;
	}
	.text-info-btn{
		width: 100%;
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.text-info-btn a{
		width: 3rem;
		height: 0.7rem;
		background: #b7c8da;
		text-align: center;
		line-height: 0.7rem;
		font-size: 0.25rem;
		color: white;
	}
	.serve-test{
		width: 100%;
		height: 2.8rem;
		padding: 0.1rem 0.3rem;
		border-bottom: 5px solid #F1F1F1;
		box-sizing: border-box;
	}
	.serve-test h2{
		width: 100%;
		height: 0.5rem;
		text-align: center;
		line-height: 0.5rem;
		font-size: 0.3rem;
		color: #999999;
	}
	.serve-test p{
		width: 100%;
		height: auto;
		color: #999999;
		font-size: 0.3rem;
	}
	.test-nav{
		width: 100%;
		height: 5rem;
	}
	.test-nav ul{
		width: 100%;
		height: auto;
		margin-top: 0.3rem;
	}
	.test-nav li{
		width: 50%;
		height: 0.9rem;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.test-nav li>span{
		display: inline-block;
		width: 0.7rem;
		height: 0.9rem;
	}
	.test-nav li:first-of-type>span{
		background: url(../../../static/image/icon_user_01.gif);		
		background-size: 0.7rem 0.9rem;
	}
	.test-nav li:nth-of-type(2)>span{
		background: url(../../../static/image/icon_user_02.gif);		
		background-size: 0.7rem 0.9rem;
	}
	.test-nav li:nth-of-type(3)>span{
		background: url(../../../static/image/icon_user_03.gif);		
		background-size: 0.7rem 0.9rem;
	}
	.test-nav li:last-of-type>span{
		background: url(../../../static/image/icon_user_04.png);		
		background-size: 0.7rem 0.9rem;
	}
	.test-nav div span{
		color: #9a9cb1;
		font-weight: bold;
		font-size: 0.25rem;
	}
	.test-nav p{
		color: #9a9cb1;
		font-size: 0.25rem;
	}
</style>